<script setup lang="ts">
import { inject } from 'vue';
import SonSonCom from './SonSonCom.vue';

interface Person {
  name: string
  age: number
}
// 父传子：子组件 通过defineProps 接收父组件传递的参数
defineProps<Person>()

// 写法一：子传父： 定义子组件的回调函数
// const emits = defineEmits<{
//    // 参数1:回调函数名称
//   // 参数n:都是需要回传数据的类型
//   (e:'my-event',age:number):void
// }>()

// 写法二：子传父： Vue 3.3+ 新增另一种更简洁的写法
const emits = defineEmits<{
  // key:回调函数名称
  // value:回调函数参数类型
  'my-event': [age:number]
  'getName' :[name:string]
}>()
// 2.inject 函数类似鸿蒙的 @Consume 装饰器 后代组件接收祖先的数据
const totalCount = inject<Number>('totalCount')
</script>

<template>
  <div class="son">
    <h2>我是子组件</h2>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>provide提供的数据{{ totalCount }}</p>
    <button @click="emits('my-event',age)">子组件触发回调函数</button>
    <button @click="emits('getName',name)">获取名字</button>
    <SonSonCom/>
  </div>

</template>

<style scoped>
.son{
  border: 1px solid red;
  margin: 10px;
  padding: 10px;
}
</style>